<template>
<div id="page-wrapper" :class="{open: toggle}" v-cloak>
  <rd-sidebar :toggle.sync="toggle" 
    :title="sidebar.title" 
    :menus="sidebar.menus" 
    :sites="sidebar.sites"
    :menu-name.sync="menuName" >
  </rd-sidebar>
  <div id="content-wrapper">
    <div class="page-content">
      <!-- Header Bar -->
      <rd-header :link-name="menuName">
        <vs-dropdown class="item dropdown">
          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
            <img :src="header.userImgSrc">
          </a>
          <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
            <li class="dropdown-header">{{username}}</li>
            <li class="divider"></li>
            <li v-for="module in showModules">
              <a href="#" @click.prevent="prompt(module)">{{$t('usermenus.' + module.name)}}</a>
            </li>
            <template v-if="supportTopoOp">
              <li class="divider"></li>
              <li v-for="module in topoModules">
                <a href="#" @click.prevent="prompt(module)">{{$t('usermenus.' + module.name)}}</a>
              </li>                          
            </template>
          </ul>          
        </vs-dropdown>
      </rd-header>
      <!-- Main Content -->
      <router-view></router-view>
    </div>
  </div>      
</div>
</template>

<script>
import ebus from 'libs/ebus.js'
import locales from '../locales/dashboard.js'
import {http, shortcutApi, commonApi} from 'share/server/api.js'
import {doLogout} from 'share/server/vuex/actions/system.js'
import {Menus, Sites} from '../configs/sidebar.js'
import settings from 'share/server/settings.js'
import msgbox from 'libs/msgbox.js'
import toast from 'libs/toast.js'

export default {
  locales,
  vuex: {
    getters: {
      username: (state) => state.auth.username,
      authReq: (state) => state.auth.req,
      client: (state) => state.auth.client,
      platform: (state) => state.system.platform
    },
    actions: {
      doLogout
    }
  },
  data () {
    return {
      toggle: true,
      sidebar: {
        title: 'M-CT-SERVER',
        menus: new Menus(this),
        sites: new Sites(this)
      },
      header: {
        userImgSrc: require('external/img/avatar.jpg')
      },
      menuName: '',
      modules: [{
        name: 'signout',
        action: this.signOut,
        show: true
      }, {
        name: 'clearTopo',
        action: this.onClearTopo,
        show: true
      }, {
        name: 'clearLicense',
        action: this.onClearLicense,
        show: true
      }, {
        name: 'resetServer',
        action: this.onResetServer,
        show: true
      }, {
        name: 'resetFactory',
        action: this.onResetFacory,
        show: this.supportResetFacory()
      }, {
        name: 'restart',
        action: this.onRestart,
        show: true
      }],
      topoModules: [{
        name: 'backupTopo',
        action: this.backupTopo
      }, {
        name: 'recoveryTopo',
        action: this.recoveryTopo
      }]
    }
  },
  computed: {
    supportTopoOp () {
      return this.platform.devModel.includes('pc')
    },
    showModules () {
      return _.filter(this.modules, {show: true})
    }
  },
  methods: {
    supportResetFacory () {
      return this.platform.devModel.includes('pc')
    },
    prompt (module) {
      msgbox.alert({
        title: this.$t('usermenus.' + module.name),
        text: this.$t('alert.areYouSure'),
        type: "warning",
        showCancelButton: true,
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonColor: "#DD6B55",
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false        
      }, 
      function() {
        msgbox.close()
        setTimeout(function() {
          module.action()
        }.bind(this), 500)
      }.bind(this)) 
    },
    runShell (shName, restart) {
      shortcutApi.runShell(shName).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          if (restart) {
            this.doRestart()
          } else {
            toast.s(this, this.$t('common.success'), '')
          }
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))      
    },
    topoBackup () {
      this.runShell('topoBackup.sh', false)
    },
    topoRecovery () {
      this.runShell('topoRecovery.sh', true)
    },
    doRestart () {
      commonApi.sendCmd('restartService')
      msgbox.showWait(this.$t('alert.plzWait'), this.$t('common.restarting'), 0)
      setTimeout(function() {
        location.reload(true)
      }, settings.restartWaitTime)
    },
    onResetServer () {
      this.runShell('serverReset.sh', true)
    },
    onClearTopo () {
      this.runShell('topoClear.sh', true)
    },
    onClearLicense () {
      this.runShell('clearLicense.sh', true)
    },
    onResetFacory () {
      this.runShell('factoryReset.sh', true)
    },
    onRestart () {
      this.doRestart()
    },
    signOut () {
      http('/api/auth/logout', 'POST').then(function(res) {
        if (res && res.data && res.data.code === 0) {

        } else {
          toast.code(this, res.data)
        }
      }.bind(this))

      this.logout()
    },
    logout () {
      //let router = this.$router

      this.doLogout()  
      //location.assign('/') 
      location.reload(true)  
      //router.go('/login')
    },
    loseConnection (msg) {
      msgbox.alert({
        title: this.$t('alert.loseConnection', {msg: msg}),
        text: this.$t('alert.plzReSignIn'),
        type: "warning",
        showCancelButton: false,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: true        
      }, 
      function() {
        this.signOut()
      }.bind(this))      
    },
    init () {
      this.menuName = this.sidebar.menus[0].name
    }
  },
  ready () {
    ebus.on('lose-connection', this.loseConnection)
    this.init()
  }
}
</script>

<style>
</style>